<template>
  <div class="history-container mobile" v-if="menus.length">
    <div class="history-content">
      <section
        class="history-item"
        :class="{ 'history-active': route.path === item.link }"
        v-for="item of menus"
        :key="item.link">
        <router-link :to="item.link">{{ item.title }}</router-link>
        <i @click.stop="close(item)" class="fas fa-xmark close-btn"></i>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MenuType } from '@/types/menu';
import menuServie from '@/hooks/useMenus';

const route = useRoute();
const menus = menuServie.history;
const close = (item: MenuType.Menu) => {
  menuServie.removeHistoryMenu(item);
};
</script>
<style scoped lang="scss">
.history-container {
  @apply bg-white overflow-x-auto items-center py-2;

  .history-content {
    @apply flex gap-2 whitespace-nowrap;

    .history-item {
      @apply flex items-center h-6 gap-1 p-2 text-sm text-gray-500 border rounded-sm cursor-pointer hover:border-[#64748b] hover:bg-[#64748b] hover:text-white duration-300;
      .close-btn {
        @apply hidden;
      }
      &:hover {
        padding: 0 1rem;
        .close-btn {
          display: block;
        }
      }
    }
    .history-active {
      @apply bg-[#64748b] text-white border-[#64748b];
    }
  }

  /* 宽度 */
  &::-webkit-scrollbar {
    height: 4px;
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;

    &:hover {
      background: rgba(69, 127, 168, 0.5);
    }
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {
    background: #2f405840;
  }
}
@media (max-width: 768px) {
  .mobile {
    display: none;
  }
}
</style>
